<template>
    <div>
        <div class="item" >
            <div class="top">
                <h4>{{tit}}</h4>
                <span>更多</span>
            </div>
                <div class="listbox">
            <ul class="list" >
            <router-link :to="{name:'aa',params:{shuju:v.id}}" v-for="(v,i) in obj" :key="i" >
                <img :src="v.images.large" alt="">
                <p>{{v.title|titleLength}}</p>
            </router-link> 
         
            </ul>
                </div>
        </div>
    </div>
</template>
<script>

export default {
    props:["obj","tit"],
    filters:{
        titleLength(val){
            return val.substr(0,6)
        }
    },
   
   
}
</script>
<style  scoped>
    .item{
        width: 3.17rem;
        height: 2.3rem;
        margin: 0 auto;
        font-size: 0.12rem;
    
    }
    .top{
       width: 3.17rem;
        height: 0.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
     .top span{
         color: #42bd56;
     }
     .listbox{
         width: 3.17rem;
         height: 2rem;
         overflow-x: auto;
         position: relative;
     }
     .list{
         position: absolute;
         list-style: none;
         width: 7rem;
         height: 2rem;
         display: flex;
         justify-content: space-between;
     }
     .list a{
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         width: 0.84rem;
        height: 1.6rem;
     }
      .list a img{
          width: 100%;
            height: 1.3rem;
      }
</style>